<template>
  <view class="layout">
    <view class="year"> {{ studentInfo.year }}学年 </view>
    <view class="basic">
      <view>
        <wd-text :text="studentInfo.score" color="#333333" size="32" />
        <wd-text text="分" color="#333333" size="16" />
      </view>
      <view class="name">
        {{ `${studentInfo.classValue} ${studentInfo.name}` }}
      </view>
      <view class="flex-row">
        <view class="item">
          <view class="height"> 身高 </view>
          <view class="number">
            {{ studentInfo.height }}
          </view>
        </view>
        <view class="item">
          <view class="weight"> 体重 </view>
          <view class="number">
            {{ studentInfo.weight }}
          </view>
        </view>
      </view>
      <view>
        <view class="flex-tip">
          <view class="bmi">
            当前BMI <view class="test-tip"> 未测试 </view>
          </view>
          <view class="go-test">
            {{ `测试 >` }}
          </view>
        </view>

        <view />
        <view />
      </view>
      <view class="flex-bmi">
        <view class="flex-column">
          <view class="low-weight" />
          <view class="low-text"> 低体重 </view>
        </view>
        <view class="flex-column">
          <view class="normal-weight" />
          <view class="normal-text"> 正常 </view>
        </view>
        <view class="flex-column">
          <view class="over-weight" />
          <view class="over-text"> 超重 </view>
        </view>
        <view class="flex-column">
          <view class="fat-weight" />
          <view class="fat-text"> 肥胖 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const studentInfo = reactive<{
  name: string;
  year: number;
  classValue: string;
  score: number;
  weight: number;
  height: number;
}>({
  name: "唐小鸭",
  year: 2025,
  classValue: "四年级一班",
  score: 80.5,
  weight: 30,
  height: 140,
});
</script>

<style lang="scss" scoped>
.layout {
  width: calc(100% - 40px);
  height: 300px;
  margin: 20px;
}
.basic {
  width: calc(100% - 40px);
  height: 267px;
  border-radius: 10px;
  background: #ffffff;
  margin-top: 20px;
  padding: 20px;
}
.item {
  width: 140px;
  height: 55px;
  border-radius: 5px;
  background: #f6f7fb;
}
.year {
  font-size: 20px;
  font-weight: normal;
  line-height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #333333;
}
.score {
  color: #333333;
  font-weight: 400;
  font-size: 32px;
}
.fen {
  color: #333333;
  font-weight: 400;
  font-size: 16px;
}
.name {
  font-size: 14px;
  font-weight: normal;
  line-height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #999999;
}
.height {
  width: 40px;
  height: 17px;
  background: linear-gradient(128deg, #cee9da 16%, #70ddad 83%);
  font-size: 12px;
  font-weight: normal;
  line-height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #00774b;
  border-radius: 5px;
}
.number {
  font-size: 20px;
  font-weight: normal;
  line-height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #434343;
  justify-content: center;
}
.weight {
  width: 40px;
  height: 17px;
  background: linear-gradient(128deg, #92e2f6 16%, #63cdfa 83%);
  font-size: 12px;
  font-weight: normal;
  line-height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #003777;
  border-radius: 5px;
}
.flex-row {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  height: 55px;
}
.bmi {
  font-size: 16px;
  font-weight: normal;
  line-height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #333333;
}
.flex-tip {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.test-tip {
  width: 40px;
  height: 14px;
  border-radius: 7px;
  background: #d9d9d9;
  font-size: 10px;
  font-weight: normal;
  line-height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #999999;
  justify-content: center;
  margin-left: 10px;
}
.go-test {
  font-size: 12px;
  font-weight: normal;
  line-height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #095aeb;
}
.flex-bmi {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}
.flex-column {
  width: 23%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .low-weight {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: #4ac396;
  }
  .low-text {
    margin-top: 5px;
    font-size: 12px;
    font-weight: normal;
    line-height: 100%;
    display: flex;
    color: #4ac396;
  }
  .normal-weight {
    @extend .low-weight;
    background: #1ba4e1;
  }
  .normal-text {
    @extend .low-text;
    color: #1ba4e1;
  }
  .over-weight {
    @extend .low-weight;
    background: #f0a619;
  }
  .over-text {
    @extend .low-text;
    color: #f0a619;
  }
  .fat-weight {
    @extend .low-weight;
    background: #d65700;
  }
  .fat-text {
    @extend .low-text;
    color: #d65700;
  }
}
</style>
